<template>
  <div class="comment">
    <!-- 静态模块 -->
    <div class="addcomment" v-show="!isFocus">
      <input type="text" placeholder="写跟帖" @focus="handlefocus" />
      <!-- 右侧小组件 -->
      <div class="widge">
        <span
          class="comment_icon"
          @click="$router.push({
          path:'/commentList/'+post.id
        })"
        >
          <i class="iconfont iconpinglun-"></i>
          <em>{{post.comment_length}}</em>
        </span>
        <i class="iconfont iconshoucang" @click="collectArticle" :class="{active:post.has_star}"></i>
        <i class="iconfont iconfenxiang"></i>
      </div>
    </div>
    <!-- 添加评论 -->
    <div class="inputcomment" v-show="isFocus">
      <textarea ref="commtext" cols="30" rows="5"></textarea>
      <div>
        <span @click="sendComment">发送</span>
        <!-- 隐藏 .inputcomment这个模块 -->
        <span @click="cancelComment">取消</span>
      </div>
    </div>
  </div>
</template>

<script>
// 引入收藏的请求方法
import { collectThisArticle, userSendComment } from "@/apis/articles.js";
export default {
  props: {
    post: {
      type: Object,
      required: true,
    },
    // 接收从父亲组件传过来的评论数据
    currentComment: {},
  },
  data() {
    return {
      isFocus: false, // 是否有聚焦
    };
  },
  //监听 currentComment 的变化
  watch: {
    // 只有 currentComment 变化才触发监听
    currentComment(newv, oldv) {
      console.log(newv, oldv);
      if (this.currentComment) {
        this.isFocus = true;
        setTimeout(() => {
          // 让文本域聚焦
          this.$refs.commtext.focus();
        }, 1);
      }
    },
  },
  methods: {
    // 发表评论
    async sendComment(e) {
      let data = {
        content: this.$refs.commtext.value,
      };
      console.log(this.currentComment);
      // 如果是回复评论,从评论数据取得相应回复的id值
      if (this.currentComment) {
        data.parent_id = this.currentComment.id;
      }
      let res = await userSendComment(this.post.id, data);
      console.log(res);

      // 给出提示
      this.$toast.success(res.data.message);
      // 发送成功，告诉父组件刷新页面
      this.$emit("refresh", e);
      //把评论框重置为空并关闭
      this.$refs.commtext.value = "";
      this.isFocus = false;
    },
    // 取消评论
    cancelComment() {
      this.isFocus = false;
      this.$refs.commtext.value = "";
      this.$emit("resetComment"); // 父组件传子，由父组件来修改值
    },
    // 获取焦点时触发
    handlefocus() {
      (this.isFocus = !this.isFocus),
        setTimeout(() => {
          // 让文本域聚焦
          this.$refs.commtext.focus();
        }, 1);
    },
    // 文章收藏
    async collectArticle() {
      // 发送请求，获取
      let res = await collectThisArticle(this.post.id);
      console.log(res);
      this.$toast.success(res.data.message);
      // 开关思想
      this.post.has_star = !this.post.has_star;
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  position: fixed;
  bottom: 5 * 100vw/360;
  .addcomment {
    width: 100vw;
    box-sizing: border-box;
    padding: 10 * 100vw/360;
    margin-top: 20 * 100vw/360;
    display: flex;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    > input {
      flex: 4;
      height: 30 * 100vw/360;
      line-height: 30 * 100vw/360;
      border-radius: 15 * 100vw/360;
      border: none;
      background-color: #eee;
      padding-left: 20 * 100vw/360;
      font-size: 14 * 100vw/360;
    }
    .widge {
      display: flex;
      justify-content: space-around;
      align-items: center;
      i {
        flex: 1;
        width: 30px;
        margin: 0 7px;
        font-size: 20 * 100vw/360;
        &.active {
          color: #f00;
        }
      }
      > span {
        flex: 1;
        width: 30px;
        margin: 0 9px;
        position: relative;
        > em {
          position: absolute;
          right: 0;
          top: -5 * 100vw/360;
          font-size: 10 * 100vw/360;
          background-color: #f00;
          color: #fff;
          border-radius: 5 * 100vw/360;
          padding: 3 * 100vw/360 5 * 100vw/360;
        }
      }
    }
  }
  .inputcomment {
    padding: 10 * 100vw/360;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    background-color: #fff;
    align-items: flex-end;
    textarea {
      flex: 3;
      background-color: #eee;
      border: none;
      border-radius: 10 * 100vw/360;
      padding: 10 * 100vw/360;
    }
    div {
      padding: 20 * 100vw/360;
    }
    span {
      display: block;
      flex: 1;
      height: 24 * 100vw/360;
      line-height: 24 * 100vw/360;
      padding: 0 10 * 100vw/360;
      background-color: #f00;
      color: #fff;
      text-align: center;
      border-radius: 6 * 100vw/360;
      font-size: 13 * 100vw/360;
      margin: 3 * 100vw/360 0;
    }
  }
}
</style>